<template>
  <!-- 页面主容器，使用 'statisContainer' 类名进行样式控制 -->
  <div class="statisContainer">
    <!-- 文本统计区域，使用 Element UI 的 el-row 组件进行布局 -->
    <el-row class="textStatis">
      <!-- 商品发布统计项，占据 6 列 -->
      <el-col :span="6" class="textStatisItem">
        <!-- 统计项标题行 -->
        <el-row class="totalTitles">
          <!-- 统计项名称 -->
          <el-col :span="12">商品发布统计</el-col>
          <!-- 统计周期标识，背景色为蓝色 -->
          <el-col :span="2" :offset="10">
            <span style="background-color: #1e9fff;">周</span>
          </el-col>
        </el-row>
        <!-- 本周商品发布数量显示行 -->
        <el-row class="totalNum">
          <!-- 绑定并显示本周商品发布数量 -->
          <el-col :span="22">{{DataNum.productSevenNum}}</el-col>
        </el-row>
        <!-- 商品总数量显示行 -->
        <el-row class="totalTotal">
          <!-- 统计项描述 -->
          <el-col :span="12">商品总数量</el-col>
          <!-- 绑定并显示商品总数量，右对齐 -->
          <el-col :span="4" :offset="6" style="text-align: right;">{{DataNum.productTotalNum}}</el-col>
        </el-row>
      </el-col>
      <!-- 新增用户统计项，占据 6 列 -->
      <el-col :span="6" class="textStatisItem">
        <!-- 统计项标题行 -->
        <el-row class="totalTitles">
          <!-- 统计项名称 -->
          <el-col :span="12">新增用户统计</el-col>
          <!-- 统计周期标识，背景色为深灰色 -->
          <el-col :span="2" :offset="10">
            <span style="background-color: #2f4056;">月</span>
          </el-col>
        </el-row>
        <!-- 本月新增用户数量显示行 -->
        <el-row class="totalNum">
          <!-- 绑定并显示本月新增用户数量 -->
          <el-col :span="22">{{DataNum.userMoonNum}}</el-col>
        </el-row>
        <!-- 用户总数量显示行 -->
        <el-row class="totalTotal">
          <!-- 统计项描述 -->
          <el-col :span="12">用户总数量</el-col>
          <!-- 绑定并显示用户总数量，右对齐 -->
          <el-col :span="4" :offset="6" style="text-align: right;">{{DataNum.userTotalNum}}</el-col>
        </el-row>
      </el-col>
      <!-- 本周订单统计项，占据 6 列 -->
      <el-col :span="6" class="textStatisItem">
        <!-- 统计项标题行 -->
        <el-row class="totalTitles">
          <!-- 统计项名称 -->
          <el-col :span="12">本周订单统计</el-col>
          <!-- 统计周期标识，背景色为绿色 -->
          <el-col :span="2" :offset="10">
            <span style="background-color: #009688;">周</span>
          </el-col>
        </el-row>
        <!-- 本周订单数量显示行 -->
        <el-row class="totalNum">
          <!-- 绑定并显示本周订单数量 -->
          <el-col :span="22">{{DataNum.orderSevenNum}}</el-col>
        </el-row>
        <!-- 订单总数量显示行 -->
        <el-row class="totalTotal">
          <!-- 统计项描述 -->
          <el-col :span="12">订单总数量</el-col>
          <!-- 绑定并显示订单总数量，右对齐 -->
          <el-col :span="4" :offset="6" style="text-align: right;">{{DataNum.orderTotalNum}}</el-col>
        </el-row>
      </el-col>
      <!-- 用户评论统计项，占据 6 列 -->
      <el-col :span="6" class="textStatisItem">
        <!-- 统计项标题行 -->
        <el-row class="totalTitles">
          <!-- 统计项名称 -->
          <el-col :span="12">用户评论统计</el-col>
          <!-- 统计周期标识，背景色为黄色 -->
          <el-col :span="2" :offset="10">
            <span style="background-color: #ffb800;">周</span>
          </el-col>
        </el-row>
        <!-- 本周用户评论数量显示行 -->
        <el-row class="totalNum">
          <!-- 绑定并显示本周用户评论数量 -->
          <el-col :span="22">{{DataNum.commentSevenNum}}</el-col>
        </el-row>
        <!-- 评论总数量显示行 -->
        <el-row class="totalTotal">
          <!-- 统计项描述 -->
          <el-col :span="12">评论总数量</el-col>
          <!-- 绑定并显示评论总数量，右对齐 -->
          <el-col :span="4" :offset="6" style="text-align: right;">{{DataNum.commentTotalNum}}</el-col>
        </el-row>
      </el-col>
      <!-- 交易金额统计项，占据 6 列 -->
      <el-col :span="6" class="textStatisItem">
        <!-- 统计项标题行 -->
        <el-row class="totalTitles">
          <!-- 统计项名称 -->
          <el-col :span="12">交易金额统计</el-col>
          <!-- 统计周期标识，背景色为红色 -->
          <el-col :span="2" :offset="10">
            <span style="background-color: #c23531;">月</span>
          </el-col>
        </el-row>
        <!-- 本月交易金额显示行 -->
        <el-row class="totalNum">
          <!-- 绑定并显示本月交易金额 -->
          <el-col :span="22">{{DataNum.moneyMoonNum}}</el-col>
        </el-row>
        <!-- 交易总金额显示行 -->
        <el-row class="totalTotal">
          <!-- 统计项描述 -->
          <el-col :span="12">交易总金额</el-col>
          <!-- 绑定并显示交易总金额，右对齐 -->
          <el-col :span="10" style="text-align: right;">{{DataNum.moneyTotalNum}}</el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 本周交易数量统计和交易金额统计区域，使用 el-row 布局 -->
    <el-row class="weekTotal">
      <!-- 本周交易数量统计图表容器，根据不同屏幕尺寸设置列宽 -->
      <el-col :xs="24" :sm="24" :md="12" class="chart-container">
        <!-- 用于渲染本周交易数量统计图表的 div 容器 -->
        <div id="weekOrder" class="chart-box"></div>
      </el-col>
      <!-- 本周交易金额统计图表容器，根据不同屏幕尺寸设置列宽 -->
      <el-col :xs="24" :sm="24" :md="12" class="chart-container">
        <!-- 用于渲染本周交易金额统计图表的 div 容器 -->
        <div id="weekMoney" class="chart-box"></div>
      </el-col>
    </el-row>
    <!-- 访问量和点击量统计区域，使用 el-row 布局 -->
    <el-row class="yearClick">
      <!-- 访问量和点击量统计图表容器，占据 24 列 -->
      <el-col :span="24" class="chart-container">
        <!-- 用于渲染访问量和点击量统计图表的 div 容器 -->
        <div id="yearClick" class="chart-box"></div>
      </el-col>
    </el-row>
    <!-- 添加页脚组件 -->
    <Footer />
  </div>
</template>

<script>
  // 引入页脚组件
  import Footer from './footer.vue'

  export default {
    // 注册组件，这里将 Footer 组件注册到当前组件中
    components: {
      Footer
    },
    // 定义组件的数据，这些数据是响应式的，当数据变化时，视图会自动更新
    data() {
      return {
        // 存储一级分类信息的数组
        firstClassify: [],
        // 存储各项统计数据的对象
        DataNum: {
          // 近七日发布的商品数量
          productSevenNum: 0,
          // 商品的总数量
          productTotalNum: 0,
          // 本月新增的用户数量
          userMoonNum: 0,
          // 用户的总数量
          userTotalNum: 0,
          // 近七日的订单数量
          orderSevenNum: 0,
          // 订单的总数量
          orderTotalNum: 0,
          // 近七日的评论数量
          commentSevenNum: 0,
          // 评论的总数量
          commentTotalNum: 0,
          // 本月的交易金额
          moneyMoonNum: 0,
          // 交易的总金额
          moneyTotalNum: 0
        },
        // 存储各个种类发布商品数量统计数据的数组
        productsNum: [],
        // 存储各个种类商品交易额统计数据的数组
        productsMoney: [],
        // 存储当年每月点击量统计数据的数组
        clickNum: [],
        // 存储当年每月访问量统计数据的数组
        visitNum: []
      }
    },
    // 组件挂载完成后执行的钩子函数，用于初始化数据和渲染图表
    mounted() {
      // 调用加载统计数据的方法
      this.loadDataNum();
      // 延迟 500 毫秒后调用绘制图表的方法，确保数据加载完成
      setTimeout(() => {
        this.weekOrder();
        this.weekMoney();
        this.yearClick();
      }, 500);
    },
    // 组件的方法集合，包含数据加载和图表绘制等逻辑
    methods: {
      // 加载各项统计数据的方法
      loadDataNum() {
        // 发送请求获取一级分类列表
        this.$axios.get('/classify/flnb', {}).then(res => {
          // 清空一级分类数组
          this.firstClassify = [];
          // 遍历响应数据，将一级分类名称添加到数组中
          res.data.forEach(resp => {
            this.firstClassify.push(resp.name);
          });
        });
        // 发送请求获取商品、用户、订单、评论和交易额的统计数据
        this.$axios.get('/utils/selectDataNum', {}).then(res => {
          // 更新商品相关统计数据
          this.DataNum.productSevenNum = res.data.productSevenNum;
          this.DataNum.productTotalNum = res.data.productTotalNum;
          // 更新用户相关统计数据
          this.DataNum.userMoonNum = res.data.userMoonNum;
          this.DataNum.userTotalNum = res.data.userTotalNum;
          // 更新订单相关统计数据
          this.DataNum.orderSevenNum = res.data.orderSevenNum;
          this.DataNum.orderTotalNum = res.data.orderTotalNum;
          // 更新评论相关统计数据
          this.DataNum.commentSevenNum = res.data.commentSevenNum;
          this.DataNum.commentTotalNum = res.data.commentTotalNum;
          // 更新交易金额相关统计数据
          this.DataNum.moneyMoonNum = res.data.moneyMoonNum;
          this.DataNum.moneyTotalNum = res.data.moneyTotalNum;
        });
        // 发送请求获取各个种类发布商品数量统计数据
        this.$axios.get('/utils/selectProductNumByFcid', {}).then(res => {
          this.productsNum = res.data;
        });
        // 发送请求获取各个种类商品交易额统计数据
        this.$axios.get('/utils/selectProductMoneyByFcid', {}).then(res => {
          this.productsMoney = res.data;
        });
        // 发送请求获取当年每月点击量统计数据
        this.$axios.get('/utils/selectClickNum', { params: { year: 2024 } }).then(res => {
          this.clickNum = res.data;
        });
        // 发送请求获取当年每月访问量统计数据
        this.$axios.get('/utils/selectVisitNum', { params: { year: 2024 } }).then(res => {
          this.visitNum = res.data;
        });
      },
      // 绘制一周商品交易统计图表的方法
      weekOrder() {
        // 初始化 ECharts 实例，绑定到指定的 DOM 元素
        let weekOrder = this.$echarts.init(document.getElementById('weekOrder'));
        // 监听窗口大小变化事件，当窗口大小改变时，重新调整图表大小
        window.addEventListener('resize', () => {
          weekOrder.resize();
        });
        // 设置 ECharts 图表的配置项
        weekOrder.setOption({
          // 图表标题
          title: {
            text: '商品交易额统计',
            left: 'center'
          },
          // 鼠标悬停时的提示框配置
          tooltip: {
            trigger: 'axis'
          },
          // 图表网格配置
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // X 轴配置，使用一级分类名称作为数据
          xAxis: {
            data: this.firstClassify,
            axisLabel: {
              // 显示所有标签
              interval: 0,
              // 标签旋转 30 度
              rotate: 30
            }
          },
          // Y 轴配置
          yAxis: {},
          // 系列配置，使用柱状图展示各个种类商品的交易额
          series: [{
            name: '销量',
            type: 'bar',
            data: this.productsMoney,
            barWidth: '30%'
          }]
        });
      },
      // 绘制商品数量统计趋势图表的方法
      weekMoney() {
        // 初始化 ECharts 实例，绑定到指定的 DOM 元素
        let weekMoney = this.$echarts.init(document.getElementById('weekMoney'));
        // 监听窗口大小变化事件，当窗口大小改变时，重新调整图表大小
        window.addEventListener('resize', () => {
          weekMoney.resize();
        });
        // 设置 ECharts 图表的配置项
        weekMoney.setOption({
          // 图表标题
          title: {
            text: '发布商品统计',
            left: 'center'
          },
          // 鼠标悬停时的提示框配置
          tooltip: {
            trigger: 'axis'
          },
          // 图表网格配置
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // X 轴配置，使用一级分类名称作为数据
          xAxis: {
            type: 'category',
            data: this.firstClassify,
            axisLabel: {
              // 显示所有标签
              interval: 0,
              // 标签旋转 30 度
              rotate: 30
            }
          },
          // Y 轴配置，使用数值类型
          yAxis: {
            type: 'value'
          },
          // 系列配置，使用柱状图展示各个种类发布商品的数量
          series: [{
            data: this.productsNum,
            type: 'bar',
            name: '数量',
            barWidth: '30%',
            // 显示背景
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }]
        });
      },
      // 绘制一年访问量与点击量趋势图表的方法
      yearClick() {
        // 初始化 ECharts 实例，绑定到指定的 DOM 元素
        let yearClick = this.$echarts.init(document.getElementById('yearClick'));
        // 监听窗口大小变化事件，当窗口大小改变时，重新调整图表大小
        window.addEventListener('resize', () => {
          yearClick.resize();
        });
        // 设置 ECharts 图表的配置项
        yearClick.setOption({
          // 图表标题
          title: {
            text: '网站访问量与点击量趋势',
            left: 'center'
          },
          // 鼠标悬停时的提示框配置
          tooltip: {
            trigger: 'axis'
          },
          // 图例配置，显示访问量和点击量的图例
          legend: {
            data: ['访问量', '点击量'],
            top: '30px'
          },
          // 图表网格配置
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // 工具盒配置，提供保存为图片的功能
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          // X 轴配置，使用月份名称作为数据
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"],
            axisLabel: {
              // 显示所有标签
              interval: 0,
              // 标签旋转 30 度
              rotate: 30
            }
          },
          // Y 轴配置，使用数值类型
          yAxis: {
            type: 'value'
          },
          // 系列配置，使用折线图展示访问量和点击量的趋势
          series: [
            {
              name: '点击量',
              type: 'line',
              data: this.clickNum,
              // 曲线平滑
              smooth: true
            },
            {
              name: '访问量',
              type: 'line',
              data: this.visitNum,
              // 曲线平滑
              smooth: true
            }
          ]
        });
      }
    }
  }
</script>
<style>
/* 页面主容器样式 */
.statisContainer {
  /* 设置内边距为 15px */
  padding: 15px;
  /* 设置背景颜色为浅灰色 */
  background-color: #f5f7fa;
  /* 最小高度为视口高度减去 50px（假设 footer 高度为 50px） */
  min-height: calc(100vh - 50px); 
  /* 使用 flex 布局，子元素垂直排列 */
  display: flex;
  flex-direction: column;
}

/* 文本统计区域样式 */
.textStatis {
  /* 使用 flex 布局，允许子元素换行 */
  display: flex;
  flex-wrap: wrap;
  /* 子元素之间的间距为 15px */
  gap: 15px;
  /* 底部外边距为 20px */
  margin-bottom: 20px;
}

/* 单个文本统计项样式 */
.textStatisItem {
  /* 子元素弹性增长，平均分配空间 */
  flex: 1;
  /* 最小宽度为 250px */
  min-width: 250px;
  /* 背景颜色为白色 */
  background-color: #FFFFFF;
  /* 边框圆角为 12px */
  border-radius: 12px;
  /* 添加阴影效果 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  /* 添加过渡效果，动画时长 0.3 秒，过渡函数为 ease */
  transition: all 0.3s ease;
}

/* 鼠标悬停在单个文本统计项上的样式 */
.textStatisItem:hover {
  /* 向上偏移 3px */
  transform: translateY(-3px);
  /* 增大阴影效果 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 统计项标题区域样式 */
.totalTitles {
  /* 高度为 48px */
  height: 48px;
  /* 行高为 48px，使文本垂直居中 */
  line-height: 48px;
  /* 左右内边距为 20px */
  padding: 0 20px;
  /* 底部边框为 1px 灰色实线 */
  border-bottom: 1px solid #ebeef5;
  /* 文本颜色为深灰色 */
  color: #303133;
  /* 字体大小为 15px */
  font-size: 15px;
  /* 字体加粗 */
  font-weight: 500;
}

/* 统计项标题区域内的 span 标签样式 */
.totalTitles span {
  /* 文本颜色为白色 */
  color: #FFFFFF;
  /* 上下内边距为 4px，左右内边距为 8px */
  padding: 4px 8px;
  /* 边框圆角为 6px */
  border-radius: 6px;
  /* 字体大小为 13px */
  font-size: 13px;
}

/* 统计项具体数值区域样式 */
.totalNum {
  /* 字体大小为 32px */
  font-size: 32px;
  /* 文本颜色为深灰色 */
  color: #303133;
  /* 行高为 1.4 */
  line-height: 1.4;
  /* 内边距为 20px */
  padding: 20px;
  /* 字体加粗 */
  font-weight: 600;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文本溢出时显示省略号 */
  text-overflow: ellipsis;
  /* 允许单词换行 */
  word-break: break-all;
  /* 不换行 */
  white-space: nowrap;
}

/* 统计项总计信息区域样式 */
.totalTotal {
  /* 字体大小为 14px */
  font-size: 14px;
  /* 上内边距为 0，左右内边距为 20px，下内边距为 15px */
  padding: 0 20px 15px;
  /* 文本颜色为中灰色 */
  color: #606266;
}

/* 本周交易数量和交易金额统计区域，以及访问量和点击量统计区域样式 */
.weekTotal,
.yearClick {
  /* 上下外边距为 20px */
  margin: 20px 0;
  /* 子元素之间的间距为 15px */
  gap: 15px;
}

/* 本周交易数量和交易金额统计区域内的列元素，以及访问量和点击量统计区域样式 */
.weekTotal .el-col,
.yearClick {
  /* 背景颜色为白色 */
  background-color: #FFFFFF;
  /* 边框圆角为 12px */
  border-radius: 12px;
  /* 内边距为 20px */
  padding: 20px;
  /* 添加阴影效果 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 移动端适配样式（屏幕宽度小于等于 768px） */
@media screen and (max-width: 768px) {
  /* 页面主容器内边距调整为 10px */
  .statisContainer {
    padding: 10px;
  }
  /* 文本统计区域改为垂直排列 */
  .textStatis {
    flex-direction: column;
  }
  /* 单个文本统计项宽度为 100%，底部外边距为 15px */
  .textStatisItem {
    width: 100%;
    margin: 0 0 15px 0;
  }
  /* 本周交易数量和交易金额统计区域改为垂直排列 */
  .weekTotal {
    flex-direction: column;
  }
  /* 本周交易数量和交易金额统计区域内的列元素宽度为 100%，底部外边距为 15px */
  .weekTotal .el-col {
    width: 100% !important;
    margin: 0 0 15px 0;
  }
  /* 统计项具体数值区域字体大小调整为 28px，内边距调整为 15px */
  .totalNum {
    font-size: 28px;
    padding: 15px;
  }
  /* 图表容器高度调整为 280px */
  #weekOrder,
  #weekMoney,
  #yearClick {
    height: 280px !important;
  }
}

/* 平板适配样式（屏幕宽度在 769px 到 1024px 之间） */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 单个文本统计项最小宽度调整为 50%减去 15px */
  .textStatisItem {
    min-width: calc(50% - 15px);
  }
}

/* 图表容器样式 */
.chart-container {
  /* 内边距为 20px */
  padding: 20px;
  /* 背景颜色为白色 */
  background: #fff;
  /* 边框圆角为 12px */
  border-radius: 12px;
  /* 添加阴影效果 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 图表区域样式 */
.chart-box {
  /* 宽度为 100% */
  width: 100% !important;
  /* 高度为 350px */
  height: 350px !important;
  /* 顶部外边距为 10px */
  margin-top: 10px;
}

/* 移动端适配样式（屏幕宽度小于等于 768px），再次调整图表相关样式 */
@media screen and (max-width: 768px) {
  /* 图表容器内边距调整为 15px，底部外边距为 15px */
  .chart-container {
    padding: 15px;
    margin-bottom: 15px;
  }
  /* 图表区域高度调整为 300px */
  .chart-box {
    height: 300px !important;
  }
  /* 本周交易数量和交易金额统计区域内的列元素左外边距为 0 */
  .weekTotal .el-col {
    margin-left: 0 !important;
  }
}

/* 平板适配样式（屏幕宽度在 769px 到 1024px 之间），再次调整图表高度 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 图表区域高度调整为 320px */
  .chart-box {
    height: 320px !important;
  }
}
</style>
